<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
          name="viewport">
    <meta content="ie=edge" http-equiv="X-UA-Compatible">
    <!--对移动设备进一步友好支持-->
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <title>Document</title>
    <link href="../boot/css/bootstrap.min.css" rel="stylesheet">
    <!--核心jquery js-->
    <script src="../boot/js/jquery-3.4.1.min.js"></script>
    <!--bootstrap 核心 js-->
    <script src="../boot/js/bootstrap.min.js"></script>
    <script>
        $(function () {
            /* $("#btn").click(function(){
                 //用来根据指定url,将页面源码包含到当前指定选择器中  被包含的页面中不能有其他额外标签或样式
                 $("#content").load("./users/list_cpoy.jsp");
             });*/
            //切换样式
            $(".list-group").on("click", ".list-group-item", function () {
                //去掉所有
                $(".list-group-item").removeClass().addClass("list-group-item");
                //点击激活
                $(this).addClass("active");
            });
        })

    </script>
</head>
<body>
<!--导航栏-->
<nav class="navbar navbar-default ">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">Maizi&nbsp;Admin</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-left list-group">
            <li class="list-group-item"><a class="btn btn-default" href="./后台首页.html"> <span
                    class="glyphicon glyphicon-home"></span> 后台首页</a></li>
            <li class="list-group-item"><a class="btn btn-default" href="./用户管理.html"> <span
                    class="glyphicon glyphicon-user"></span> 用户管理</a></li>
            <li class="list-group-item"><a class="btn btn-default" href="./内容管理.html"> <span
                    class="glyphicon glyphicon-list-alt"></span> 内容管理</a></li>
            <li class="list-group-item"><a class="btn btn-default" href="./标签管理.html"> <span
                    class="glyphicon glyphicon-tag"></span> 标签管理</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
                <a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#"
                   role="button">admin <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider" role="separator"></li>
                    <li><a href="#">Separated link</a></li>
                </ul>
            </li>
            <li><a class="btn btn-default" href=""> <span class="glyphicon glyphicon-off"></span> 退出</a></li>
        </ul>
    </div>
</nav>
<!--栅格容器-->
<div class="container-fluid">
    <div class="row">
        <!--内容填充-->
        <div class="col-sm-12">
            <h1>Hello,World!</h1>
            <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured
                content or information.</p>
            <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
        </div>
        <!--漏洞提醒-->
        <div class="alert alert-danger alert-dismissible col-sm-12">
            <button class="close" data-dismiss="alert"><span>&times;</span></button>
            <h2><strong>网站程序漏洞，继续修复</strong></h2><br>
            当前版本(v1.0)存在严重安全问题，容易造成攻击，请<a class="alert-link" href="">立即修复</a><br>
            <button class="btn-danger btn-lg">立即修复</button>
            <button class="btn-default btn-lg">稍后处理</button>
        </div>
        <!--统计数据-->
        <div class="col-sm-6 aa">
            <table class="table table-striped table-bordered table-hover table-condensed">
                <thead>
                <tr>
                    <td colspan="8">网站数据统计</td>
                </tr>
                </thead>

                <tbody>
                <tr>
                    <td>统计项目</td>
                    <td>今日</td>
                    <td>昨日</td>
                </tr>
                <tr>
                    <td>注册会员</td>
                    <td>200</td>
                    <td>400</td>
                </tr>
                <tr>
                    <td>注册会员</td>
                    <td>200</td>
                    <td>400</td>
                </tr>
                <tr>
                    <td>注册会员</td>
                    <td>200</td>
                    <td>400</td>
                </tr>
                <tr>
                    <td>注册会员</td>
                    <td>200</td>
                    <td>400</td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="col-sm-6 aa">
            <table class="table table-striped table-bordered table-hover table-condensed">
                <tr>
                    <td colspan="8">网站热帖</td>
                </tr>
                <tbody>
                <tr>
                    <td><a href=""><span class="glyphicon glyphicon-list-alt"></span> 泛Mooc职业教育，效果和就业为王</a>
                    </td>
                </tr>
                <tr>
                    <td><a href=""><span class="glyphicon glyphicon-list-alt"></span> 泛Mooc职业教育，效果和就业为王</a>
                    </td>
                </tr>
                <tr>
                    <td><a href=""><span class="glyphicon glyphicon-list-alt"></span> 泛Mooc职业教育，效果和就业为王</a>
                    </td>
                </tr>
                <tr>
                    <td><a href=""><span class="glyphicon glyphicon-list-alt"></span> 泛Mooc职业教育，效果和就业为王</a>
                    </td>
                </tr>
                <tr>
                    <td><a href=""><span class="glyphicon glyphicon-list-alt"></span> 泛Mooc职业教育，效果和就业为王</a>
                    </td>
                </tr>
                <tr>
                    <td><a href=""><span class="glyphicon glyphicon-list-alt"></span> 泛Mooc职业教育，效果和就业为王</a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="col-sm-6 aa">
            <ul class="list-group" style="text-decoration: none">
                <li>今日访客统计</li>
                <li><img alt="这是一个统计图片" class="img-rounded"
                         src="https://gss3.bdstatic.com/-Po3dSag_xI4khGkpoWK1HF6hhy/baike/s%3D220/sign=732ef76e0cf3d7ca08f63874c21fbe3c/ac345982b2b7d0a2e7f8b4cdcbef76094b369aa9.jpg"
                         title="这是一个统计数据"
                         width="450">
                </li>
            </ul>
        </div>
        <div class="col-sm-6 aa">
            <ul class="list-group">
                <li class="list-group-item">系统状态</li>
                <li class="list-group-item">
                    内存使用率40%<br>
                    <div class="progress">
                        <div class="progress-bar progress-bar-success progress-bar-striped active"
                             style="width: 40%"></div>
                    </div>
                    数据库使用率20%<br>
                    <div class="progress">
                        <div class="progress-bar progress-bar-info progress-bar-striped active"
                             style="width: 20%"></div>
                    </div>
                    磁盘使用率60%<br>
                    <div class="progress">
                        <div class="progress-bar progress-bar-warning progress-bar-striped active"
                             style="width: 60%"></div>
                    </div>
                    CPU使用率80%<br>
                    <div class="progress">
                        <div class="progress-bar progress-bar-danger progress-bar-striped active"
                             style="width: 80%">
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div><!--栅格结束-->
</div><!--栅格结束-->
</body>
</html>